<script setup lang="ts">
import Tool from "@/modal/Tool";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import type {Reactive} from "vue";

interface iTool {
  tools: Reactive<Tool>;
}

const props = defineProps<iTool>();
const tool = props.tools;
const emits = defineEmits(['emitGrowUp', 'emitUseTool']);
const growUp = () => emits('emitGrowUp', tool);
const useTool = () => emits('emitUseTool', tool);
</script>

<template>
  <div class="tool-type col-12 h-100">
    <div class="type-name">
      <div class="show-status"
           :class="{active:tool.isRipen}">
        <div v-if="tool.isRipen">√</div>
      </div>
      <div>
        <icon-font
          :icon-type="tool.featuresDesc.titleIcon.type"
          :color="tool.featuresDesc.titleIcon.color"
          :is-desc="true"
          font-size="xx-large">
          <template #description>
            {{ tool.chineseName }}
          </template>
        </icon-font>
      </div>
      <div class="use-tool"
           v-if="tool.canUse"
           @click="useTool">
        <icon-font :icon-type="IconType.STAR"></icon-font>
      </div>
    </div>
    <div class="type-desc">
      <div class="type-desc-text user-select-none">{{ tool.textDesc }}</div>
      <div class="type-desc-icon">
        <template v-if="tool.featuresDesc.awardIcon?.type">
          <div class="icon-award">
            <icon-font
              :icon-type="tool.featuresDesc.awardIcon.type"
              :number="tool.featuresDesc.awardIcon.number"
              :color="tool.featuresDesc.awardIcon.color"
              :is-desc="true">
              <template #description>
                <div class="icon-switch">
                  {{ tool.featuresDesc.awardIcon.switch }}
                </div>
                <div v-for="items in tool.featuresDesc.conditionIcon"
                     class="icon-condition">
                  <icon-font
                    :icon-type="items.type"
                    :number="items.number"
                    :color="items.color">
                  </icon-font>
                </div>
              </template>
            </icon-font>
          </div>
        </template>
      </div>
    </div>
    <div class="type-step"
         @click="growUp">
      <template v-for="steps in tool.ripenStage">
        <div class="steps"
             :class="[
               {completed:steps===tool.ripenStage},
               {active:steps<=tool.currentStep}
             ]">
        </div>
      </template>
      <template v-if="tool.score!=0">
        <icon-font :icon-type="IconType.SCORE"
                   :color="IconColor.SCORE"
                   :number="tool.score">
        </icon-font>
      </template>
    </div>
  </div>
</template>

<style scoped>
.tool-type {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.type-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
}

.show-status {
  position: absolute;
  display: flex;
  left: 15px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(85, 107, 47, .2);
  border-radius: 6px;
}

.show-status.active {
  border-color: saddlebrown;
  color: seagreen;
}

.use-tool {
  position: absolute;
  right: 15px;
}

.type-desc {
  display: flex;
  flex-direction: column;
  height: 70px;
}

.type-desc-text {
  display: flex;
  align-items: center;
  text-align: center;
  height: 50%;
}

.type-desc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
}

.icon-switch {
  line-height: 2.2;
  margin-right: 5px;
}

.type-step {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100% - 110px);
  align-items: center;
  justify-content: center;
}

.steps {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  border: 1px solid darkgoldenrod;
  border-radius: 4px;
}

.steps.completed {
  border-radius: 50%;
}

.steps.active {
  background-color: bisque;
}
</style>